<template>
  <div class="tools-container">
    <!-- 工具页面头部 -->
    <div class="mb-6">
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-2xl font-bold text-gray-900">酿造工具</h1>
          <p class="mt-1 text-sm text-gray-500">各种实用的酿造计算工具</p>
        </div>
        <!-- 返回按钮，仅在子页面显示 -->
        <button
          v-if="hasActiveChild"
          @click="router.push('/tools')"
          class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-brew-amber hover:bg-brew-amber hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brew-amber transition-colors duration-200"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
          </svg>
          返回工具列表
        </button>
      </div>
      
      <!-- 面包屑导航 -->
      <nav v-if="hasActiveChild" class="mt-4">
        <ol class="flex items-center space-x-2 text-sm text-gray-500">
          <li>
            <router-link to="/tools" class="hover:text-brew-amber">工具</router-link>
          </li>
          <li>
            <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </li>
          <li class="font-medium text-gray-900">{{ currentToolName }}</li>
        </ol>
      </nav>
    </div>

    <!-- 工具网格，仅在主页显示 -->
    <div v-if="!hasActiveChild" class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <!-- 柏拉图-比重转换器 -->
      <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-200">
        <div class="p-6">
          <div class="flex items-center justify-center w-12 h-12 bg-brew-amber bg-opacity-10 rounded-lg mb-4">
            <span class="text-2xl">🔢</span>
          </div>
          <h3 class="text-lg font-medium text-gray-900">柏拉图-比重转换器</h3>
          <p class="mt-2 text-sm text-gray-500">在柏拉图和比重(SG)之间进行转换</p>
          <div class="mt-4">
            <router-link
              :to="{ name: 'plato-calculator' }"
              class="inline-flex items-center text-sm font-medium text-brew-amber hover:text-brew-amber-dark"
            >
              使用工具
              <svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </router-link>
          </div>
        </div>
      </div>

      <!-- 酒精度计算器 -->
      <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-200">
        <div class="p-6">
          <div class="flex items-center justify-center w-12 h-12 bg-brew-amber bg-opacity-10 rounded-lg mb-4">
            <span class="text-2xl">🍺</span>
          </div>
          <h3 class="text-lg font-medium text-gray-900">酒精度计算器</h3>
          <p class="mt-2 text-sm text-gray-500">根据比重读数计算酒精度(ABV)</p>
          <div class="mt-4">
            <router-link
              :to="{ name: 'abv-calculator' }"
              class="inline-flex items-center text-sm font-medium text-brew-amber hover:text-brew-amber-dark"
            >
              使用工具
              <svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </router-link>
          </div>
        </div>
      </div>

      <!-- 啤酒颜色转换器 -->
      <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-200">
        <div class="p-6">
          <div class="flex items-center justify-center w-12 h-12 bg-brew-amber bg-opacity-10 rounded-lg mb-4">
            <span class="text-2xl">🎨</span>
          </div>
          <h3 class="text-lg font-medium text-gray-900">啤酒颜色转换器</h3>
          <p class="mt-2 text-sm text-gray-500">在 SRM、EBC 和 Lovibond 之间转换</p>
          <div class="mt-4">
            <router-link
              :to="{ name: 'color-converter' }"
              class="inline-flex items-center text-sm font-medium text-brew-amber hover:text-brew-amber-dark"
            >
              使用工具
              <svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </router-link>
          </div>
        </div>
      </div>

      <!-- 比重计温度校正 -->
      <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-200">
        <div class="p-6">
          <div class="flex items-center justify-center w-12 h-12 bg-brew-amber bg-opacity-10 rounded-lg mb-4">
            <span class="text-2xl">🌡️</span>
          </div>
          <h3 class="text-lg font-medium text-gray-900">比重计温度校正</h3>
          <p class="mt-2 text-sm text-gray-500">根据温度校正比重计读数</p>
          <div class="mt-4">
            <router-link
              :to="{ name: 'hydrometer-correction' }"
              class="inline-flex items-center text-sm font-medium text-brew-amber hover:text-brew-amber-dark"
            >
              使用工具
              <svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </router-link>
          </div>
        </div>
      </div>

      <!-- 酵母接种量计算器 -->
      <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-200">
        <div class="p-6">
          <div class="flex items-center justify-center w-12 h-12 bg-brew-amber bg-opacity-10 rounded-lg mb-4">
            <span class="text-2xl">🧬</span>
          </div>
          <h3 class="text-lg font-medium text-gray-900">酵母接种量计算器</h3>
          <p class="mt-2 text-sm text-gray-500">计算所需的酵母数量</p>
          <div class="mt-4">
            <router-link
              :to="{ name: 'yeast-calculator' }"
              class="inline-flex items-center text-sm font-medium text-brew-amber hover:text-brew-amber-dark"
            >
              使用工具
              <svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </router-link>
          </div>
        </div>
      </div>

      <!-- 卡路里计算器 -->
      <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-200">
        <div class="p-6">
          <div class="flex items-center justify-center w-12 h-12 bg-brew-amber bg-opacity-10 rounded-lg mb-4">
            <span class="text-2xl">📊</span>
          </div>
          <h3 class="text-lg font-medium text-gray-900">卡路里计算器</h3>
          <p class="mt-2 text-sm text-gray-500">估算啤酒的卡路里含量</p>
          <div class="mt-4">
            <router-link
              :to="{ name: 'calorie-calculator' }"
              class="inline-flex items-center text-sm font-medium text-brew-amber hover:text-brew-amber-dark"
            >
              使用工具
              <svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </router-link>
          </div>
        </div>
      </div>

      <!-- 水果稀释计算器 -->
      <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-200">
        <div class="p-6">
          <div class="flex items-center justify-center w-12 h-12 bg-brew-amber bg-opacity-10 rounded-lg mb-4">
            <span class="text-2xl">🍎</span>
          </div>
          <h3 class="text-lg font-medium text-gray-900">水果稀释计算器</h3>
          <p class="mt-2 text-sm text-gray-500">计算添加水果后的稀释效果</p>
          <div class="mt-4">
            <router-link
              :to="{ name: 'fruit-dilution' }"
              class="inline-flex items-center text-sm font-medium text-brew-amber hover:text-brew-amber-dark"
            >
              使用工具
              <svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </router-link>
          </div>
        </div>
      </div>

      <!-- Speise计算器 -->
      <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-200">
        <div class="p-6">
          <div class="flex items-center justify-center w-12 h-12 bg-brew-amber bg-opacity-10 rounded-lg mb-4">
            <span class="text-2xl">🔄</span>
          </div>
          <h3 class="text-lg font-medium text-gray-900">Speise计算器</h3>
          <p class="mt-2 text-sm text-gray-500">计算所需的发酵中的麦汁量</p>
          <div class="mt-4">
            <router-link
              :to="{ name: 'speise-calculator' }"
              class="inline-flex items-center text-sm font-medium text-brew-amber hover:text-brew-amber-dark"
            >
              使用工具
              <svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </router-link>
          </div>
        </div>
      </div>

      <!-- 啤酒名称生成器 -->
      <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-200">
        <div class="p-6">
          <div class="flex items-center justify-center w-12 h-12 bg-brew-amber bg-opacity-10 rounded-lg mb-4">
            <span class="text-2xl">✨</span>
          </div>
          <h3 class="text-lg font-medium text-gray-900">啤酒名称生成器</h3>
          <p class="mt-2 text-sm text-gray-500">生成创意啤酒名称</p>
          <div class="mt-4">
            <router-link
              :to="{ name: 'beer-name-generator' }"
              class="inline-flex items-center text-sm font-medium text-brew-amber hover:text-brew-amber-dark"
            >
              使用工具
              <svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </router-link>
          </div>
        </div>
      </div>

      <!-- 啤酒菜单 -->
      <div class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-200">
        <div class="p-6">
          <div class="flex items-center justify-center w-12 h-12 bg-brew-amber bg-opacity-10 rounded-lg mb-4">
            <span class="text-2xl">🍻</span>
          </div>
          <h3 class="text-lg font-medium text-gray-900">啤酒菜单</h3>
          <p class="mt-2 text-sm text-gray-500">展示精酿啤酒的电子菜单</p>
          <div class="mt-4">
            <router-link
              :to="{ name: 'beer-menu' }"
              class="inline-flex items-center text-sm font-medium text-brew-amber hover:text-brew-amber-dark"
            >
              使用工具
              <svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 子路由内容 -->
    <div v-if="hasActiveChild" class="bg-white shadow rounded-lg overflow-hidden">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const hasActiveChild = computed(() => route.path !== '/tools')

// 获取当前工具名称
const currentToolName = computed(() => {
  const toolNames = {
    'plato-calculator': '柏拉图-比重转换器',
    'abv-calculator': '酒精度计算器',
    'color-converter': '啤酒颜色转换器',
    'hydrometer-correction': '比重计温度校正',
    'yeast-calculator': '酵母接种量计算器',
    'calorie-calculator': '卡路里计算器',
    'fruit-dilution': '水果稀释计算器',
    'speise-calculator': 'Speise计算器',
    'beer-name-generator': '啤酒名称生成器',
    'beer-menu': '啤酒菜单'
  }
  return toolNames[route.name] || '工具'
})
</script>

<style scoped>
.tools-container {
  max-width: 7xl;
  margin: 0 auto;
  padding: 1.5rem;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style> 